<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <style type="text/css">
        td
        {
            font-size: 12px;
            color: #000000;
            line-height: 150%;
        }
        .sec1
        {
            background-color: #EEEEEE;
            cursor: hand;
            color: #000000;
            border-left: 1px solid #FFFFFF;
            border-top: 1px solid #FFFFFF;
            border-right: 1px solid gray;
            border-bottom: 1px solid #FFFFFF;
        }
        .sec2
        {
            background-color: #D4D0C8;
            cursor: hand;
            color: #000000;
            border-left: 1px solid #FFFFFF;
            border-top: 1px solid #FFFFFF;
            border-right: 1px solid gray;
            font-weight: bold;
        }
        .main_tab
        {
            background-color: #D4D0C8;
            color: #000000;
            border-left: 1px solid #FFFFFF;
            border-right: 1px solid gray;
            border-bottom: 1px solid gray;
        }
    </style>
</head>

<script>
    function secBoard(n) {
		var oRow=secTable.rows[0];
        for (i = 0; i < oRow.cells.length; i++)
            oRow.cells[i].className = "sec1";
			oRow.cells[n].className = "sec2";
        for (i = 0; i < mainTable.tBodies.length; i++)
            mainTable.tBodies[i].style.display = "none";
        mainTable.tBodies[n].style.display = "block";
    } 
</script>

<table border="0" cellspacing="0" cellpadding="0" width="549" id="secTable">
    <tr height="20" align="center">
        <td class="sec2" width="10%" onclick="secBoard(0)">
            关于TBODY标记
        </td>
        <td class="sec1" width="10%" onclick="secBoard(1)">
            关于cells集合
        </td>
        <td class="sec1" width="10%" onclick="secBoard(2)">
            关于tBodies集合
        </td>
        <td class="sec1" width="10%" onclick="secBoard(3)">
            关于display属性
        </td>
    </tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="549" height="240" id="mainTable"
    class="main_tab">
    <tbody style="display: block;">
        <tr>
            <td align="center" valign="top">
                <br>
                <br>
                这里填加内容，略去。1
            </td>
        </tr>
    </tbody>
    <tbody style="display: none;">
        <tr>
            <td align="center" valign="top">
                <br>
                <br>
                这里填加内容，略去。2
            </td>
        </tr>
    </tbody>
    <tbody style="display: none;">
        <tr>
            <td align="center" valign="top">
                <br>
                <br>
                这里填加内容，略去。3
            </td>
        </tr>
    </tbody>
    <tbody style="display: none;">
        <tr>
            <td align="center" valign="top">
                <br>
                <br>
                这里填加内容，略去。4
            </td>
        </tr>
    </tbody>
</table>
</html>
